<template>
  <div
    class="group mx-9px w-206px h-326px flex flex-col bg-white rounded-16px cursor-pointer hover:shadow-lg transition relative"
    @click="gotoUserDetail(item)"
  >
    <div class="relative w-206px h-238px rounded-tl-16px rounded-tr-16px overflow-hidden">
      <div
        class="van-image transform object-cover group-hover:scale-110 transition"
        style="width: 206px; height: 238px"
      >
        <img class="object-cover w-full h-full" :src="item.header_img" />
      </div>
      <div
        class="absolute top-8px left-8px bg-#16D6B5 border border-white rounded-11px w-[fit-content] h-18px px-6px box-border flex flex-row items-center"
      >
        <div class="w-4px h-4px rounded-50% bg-white"></div>
        <div class="ml-4px text-12px font-500 text-white">在线</div>
      </div>
    </div>
    <div
      class="mt-8px mx-12px w-170px h-24px leading-24px text-16px font-bold text-#242633 truncate"
    >
      {{ item.nick_name }}
    </div>
    <div class="mt-5px mx-12px h-12px flex flex-row items-center">
      <img src="@/assets/xx.png" alt="" class="w-12px h-12px" />
      <div class="ml-3px text-14px font-bold text-#333333">{{ item.score }}</div>
      <div class="mx-6px w-1px h-8px bg-#D8D8D8"></div>
      <div class="text-12px text-#525566">服务 {{ item.order_count }}</div>
    </div>
    <div class="mt-9px mx-10px h-20px flex flex-row items-center">
      <img src="@/assets/money.png" alt="" class="w-20px h-20px" />
      <div class="ml-4px text-18px text-#FF9B00 font-bold">{{ item.gold_coin }}</div>
      <div class="ml-3px text-14px text-#8A8C9A">{{ item.text }}</div>
    </div>
    <!-- <div class="absolute right-8px top-222px w-32px h-32px">
                <button class="w-full h-full">
                  <img
                    src="@/assets/player_audio_play_normal.8c7f9ca1.png"
                    alt=""
                    class="w-full h-full"
                  />
                </button>
              </div> -->
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const gotoUserDetail = (item) => {
  router.push({ name: 'User', params: { id: item.user_id } })
}
defineProps(['item'])
</script>
<style lang="less" scoped></style>
